<template>
	<view class="vote-submit-container">
		<view class="vote-submit-hd">
			<view class="title-box">
				<view class="title">{{themeName || ''}}</view>
			</view>
			<view class="footer-icon">
				<image src="../../static/vote/footer-icon.png"></image>
			</view>
			<view class="footer-icon2">
				<image src="../../static/vote/footer-icon.png"></image>
			</view>
		</view>
		<view class="vote-submit-bd">
			<view class="box">
				<view class="des">{{themeDes || ''}}</view>
			</view>
		</view>
		<view class="vote-submit-rs">
			<view class="title">{{loginName}}</view>
			<view v-if="(type === 'vote') && (items.length > 0)" v-for="(item, index) in items" :key="index" class="item" @tap="select(item)">
				<view class="left">
					<image :src="item.checked?'../../static/vote/checked.png':'../../static/vote/check.png'" mode=""></image>
				</view>
				<view class="right">{{item.name || ''}}</view>
			</view>
			<!-- <view v-if="type === 'vote'" class="item">
				<view class="left">
					<image :src="!checked?'../../static/vote/checked.png':'../../static/vote/check.png'" mode=""></image>
				</view>
				<view class="right">歌曲周杰伦《以父之名》</view>
			</view>
			<view v-if="type === 'vote'" class="item">
				<view class="left">
					<image :src="checked?'../../static/vote/checked.png':'../../static/vote/check.png'" mode=""></image>
				</view>
				<view class="right">舞蹈《恋》</view>
			</view>
			<view v-if="type === 'vote'" class="item">
				<view class="left">
					<image :src="checked?'../../static/vote/checked.png':'../../static/vote/check.png'" mode=""></image>
				</view>
				<view class="right">小品《回家》</view>
			</view> -->
			
			<view v-if="(type === 'elect') && (items.length > 0)" class="remark">要求选举人数：2</view>
			<view v-if="(type === 'elect') && (items.length > 0)" v-for="(item, index) in items" :key="index" class="item">
				<view class="left">
					<image :src="item.checked?'../../static/vote/checked.png':'../../static/vote/check.png'" mode=""></image>
				</view>
				<view class="right">周旋</view>
			</view>
			<!-- <view v-if="type === 'elect'" class="item">
				<view class="left">
					<image :src="item.checked?'../../static/vote/checked.png':'../../static/vote/check.png'" mode=""></image>
				</view>
				<view class="right">周旋</view>
			</view>
			<view v-if="type === 'elect'" class="item">
				<view class="left">
					<image :src="!checked?'../../static/vote/checked.png':'../../static/vote/check.png'" mode=""></image>
				</view>
				<view class="right">饶伟华</view>
			</view>
			<view v-if="type === 'elect'" class="item">
				<view class="left">
					<image :src="checked?'../../static/vote/checked.png':'../../static/vote/check.png'" mode=""></image>
				</view>
				<view class="right">罗智锋</view>
			</view>
			<view v-if="type === 'elect'" class="item">
				<view class="left">
					<image :src="checked?'../../static/vote/checked.png':'../../static/vote/check.png'" mode=""></image>
				</view>
				<view class="right">陈颖</view>
			</view> -->
			
		</view>
		<view class="vote-submit-opra">
			<view class="left">
				<view class="vote-btn vote-btn-view" @tap="showDetail()">查看结果</view>
			</view>
			<view class="right">
				<view v-if="canSubmit === true" class="vote-btn vote-btn-submit" @tap="save()">提交</view>
				<view v-if="canSubmit === false" class="vote-btn vote-btn-submit2">提交</view>
			</view>
		</view>
		<!-- <u-toast ref="uToast" /> -->
	</view>
</template>
<script>
	import {
		getVoteItemsList,
		getSystemDictData,
		addVoteLog
	} from '../../common/service.js'
	
	export default {
		data() {
			return {
				themeId: '', // 议题ID
				themeName: '', // 议题名称
				themeDes: '', // 议题描述
				loginName: this.CONFIG.user.name || '', // 当前登录人
				checked: false, // 选项状态
				type: 'vote', // 活动类型：vote:投票 || elect:选举
				canSubmit: true,
				themeType: [], // 活动类型-数据字典
				items: [] // 选择项列表
			}
		},
		onLoad: function(option) {
			console.log('submit-onLoad-option:');
			console.log(option);
			const that = this;
			if (option.id) {
				that.themeId = option.id;
			} else {
				// #ifdef H5
				console.log('ifdef H5');
				// 打包H5需使用这种获取地址栏参数的方式
				const id = that.getQueryString('id');
				console.log('获取地址栏中的id:' + id);
				if (id) {
					that.themeId = id;
					console.log('themeId:'+that.themeId);
				}
				// #endif
			}
			
			if (option.name) {
				that.themeName = option.name;
			} else {
				// #ifdef H5
				console.log('ifdef H5');
				// 打包H5需使用这种获取地址栏参数的方式
				const name = that.getQueryString('name');
				console.log('获取地址栏中的name:' + name);
				if (name) {
					that.themeName = name;
					console.log('themeName:'+that.themeName);
				}
				// #endif
			}
			
			if (option.des) {
				that.themeDes = option.des;
			} else {
				// #ifdef H5
				console.log('ifdef H5');
				// 打包H5需使用这种获取地址栏参数的方式
				const des = that.getQueryString('des');
				console.log('获取地址栏中的des:' + des);
				if (des) {
					that.themeDes = des;
					console.log('themeDes:'+that.themeDes);
				}
				// #endif
			}
			
			if (option.type) {
				that.type = option.type;
				console.log('1.设置type:'+that.type);
			} else {
				// #ifdef H5
				console.log('ifdef H5');
				// 打包H5需使用这种获取地址栏参数的方式
				const type = that.getQueryString('type');
				console.log('获取地址栏中的type:' + type);
				if (type) {
					that.type = type;
					console.log('2.设置type:'+that.type);
				}
				// #endif
			}
		},
		onShow: function() {
			const that = this;
			// if (that.type === 'elect' && (that.canSubmit === true)) {
			// 	that.canSubmit = false;
			// }
			if (that.themeId) {
				that.getTHEMETYPE(function() {
					that.getItems(that.themeId, function() {
						if (that.type === 'vote') {
							// 投票
						} else {
							// 选举
						}
					});
				})
			}
		},
		methods: {
			select(vote) {
				const that = this;
				that.items.forEach(function(item) {
					if (item.id === vote.id) {
						if (item.checked) {
							item.checked = false;
						} else {
							item.checked = true;
						}
					} else {
						item.checked = false;
					}
				})
			},
			save() {
				const that = this;
				console.log('提交投票中');
				console.log(that.items);
				var myItemId = '';
				var myItemName = '';
				that.items.forEach(function(item) {
					if (item.checked === true) {
						myItemId = item.id;
						myItemName = item.name;
					}
				})
				if (!myItemId) {
					return;
				}
				// /vote/log 新增投票结果 POST方法
				
				// finalGoal 最终投票结果 integer($int64)
				// itemValueId 投票项值id
				// itemValueName 投票项值名称
				// proxyedVetor 被代理人工号
				// voteEmployeeId 参会人员id
				
				var params = {
					themeId: that.themeId,
					themeName: that.themeName,
					createdBy: that.loginName,
					hn: that.CONFIG.user.id,
					isActive: '1',
					itemId: myItemId,
					itemName: myItemName,
					lesseeId: that.CONFIG.lesseeid || '13'
				};
				addVoteLog(params, function(res) {
					console.log('查看提交投票结果：');
					console.log(res);
				})
			},
			getTHEMETYPE(call) {
				const that = this;
				getSystemDictData('THEME_TYPE', function(resuser) {
					if (resuser && resuser.statusCode == 200) {
						const rs = resuser.data;
						console.log('数据字典-主题类型枚举列表结果:');
						if (rs.code == 200) {
							that.themeType = rs.data || [];
							console.log(that.themeType);
							if (call) {
								call()
							}
						}
					}
				}, function(e) {
					console.log('获取数据字典-主题类型枚举列表失败:');
					console.log(e);
				});
			},
			getItems(id, call) {
				const that = this;
				const params = {
					themeId: id,
					hn: that.CONFIG.user.id
				};
				getVoteItemsList(params, function(resuser) {
					if (resuser && resuser.statusCode == 200) {
						const rs = resuser.data;
						console.log('投票项列表结果:');
						console.log(rs);
						if (rs.code == 200) {
							var list = rs.rows || [];
							if (list.length>0) {
								list.forEach(function(item) {
									item.checked = false;
									if (item.hn == that.CONFIG.user.id) {
										item.checked = true;
										that.canSubmit = false;
									}
								})
							}
							that.items = list;
							console.log(that.items);
							if (call) {
								call()
							}
						}
					}
				}, function(e) {
					console.log('获取投票项列表失败:');
					console.log(e);
				});
			},
			showDetail() {
				const that = this;
				if (!that.themeId) {
					return;
				}
				uni.navigateTo({
				    url: './detail?id=' + that.themeId
				});
			},
			getQueryString(name) {
				const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				const r = window.location.search.substr(1).match(reg);
				if (r != null) return unescape(r[2]);
				return null;
			},
		}
	}
</script>
<style>
	page{
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
		background: #0A1B87;
	}
	.vote-submit-container {
		width: 100%;
		padding-left: 0;
		padding-right: 0;
		padding-top: 29rpx;
		padding-bottom: 193rpx;
		margin: 0;
		background: #0A1B87;
	}
	.vote-submit-hd{
		width: 710rpx;
		height: 248rpx;
		background: url(../../static/vote/head-bg2.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center center;
		position: relative;
		margin-left: 20rpx;
	}
	.vote-submit-hd .title-box{
		width: 667rpx;
		height: 154rpx;
		display:flex;
		align-items:center;
		justify-content: center;
		padding: 20rpx 58rpx 16rpx 68rpx;
		overflow: hidden;
		border-radius: 26rpx;
		position: absolute;
		top: 20rpx;
		left: 22rpx;
	}
	.vote-submit-hd .title-box .title{
		line-height: 42rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #14378F;
		word-break: break-all;
		text-overflow: ellipsis;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}
	.vote-submit-hd .footer-icon, .vote-submit-hd .footer-icon2{
		width: 45rpx;
		height: 105rpx;
		position: absolute;
		top: 210rpx;
	}
	.vote-submit-hd .footer-icon{
		left: 58rpx;
	}
	.vote-submit-hd .footer-icon2{
		right: 62rpx;
	}
	.vote-submit-hd .footer-icon image, .vote-submit-hd .footer-icon2 image{
		width: 100%;
		height: 100%;
	}
	.vote-submit-bd{
		width: 690rpx;
		/* height: 416rpx; */
		min-height: 133rpx;
		background-color: #094EC6;
		border-radius: 10rpx;
		margin-left: 30rpx;
		margin-top: 19rpx;
		padding-bottom: 14rpx;
	}
	.vote-submit-bd .box{
		width: 100%;
		/* height: 396rpx; */
		min-height: 111rpx;
		background: #1D62D8;
		border-radius: 10rpx;
		padding-top: 56rpx;
		padding-bottom: 33rpx;
	}
	.vote-submit-bd .box .des{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 42rpx;
		word-wrap: break-word;
		word-break: break-all;
		overflow: hidden;
		padding: 11rpx 53rpx 11rpx 51rpx;
	}
	.vote-submit-rs{
		width: 710rpx;
		/* height: 345rpx; */
		min-height: 165rpx;
		background: #FAEFD0;
		border-radius: 20rpx;
		margin-left: 20rpx;
		margin-top: 54rpx;
		padding-top: 88rpx;
		padding-bottom: 30rpx;
		position: relative;
	}
	.vote-submit-rs .remark{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #731D03;
		position: absolute;
		top: 33rpx;
		right: 37rpx;
	}
	.vote-submit-rs .title{
		/* width: 248rpx; */
		height: 64.2rpx;
		padding-right: 70rpx;
		text-align: left;
		text-indent: 36rpx;
		line-height: 64.2rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		background: url(../../static/vote/flag.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center center;
		border-radius: 4rpx 32rpx 32rpx 4rpx;
		position: absolute;
		top: -27rpx;
		left: -10rpx;
	}
	.vote-submit-rs .item{
		width: 100%;
		height: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 32rpx;
	}
	.vote-submit-rs .item .left{
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		margin-left: 50rpx;
		margin-right: 16rpx;
	}
	.vote-submit-rs .item .left image{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	.vote-submit-rs .item .right{
		flex: 1;
		text-align: left;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #0A1B87;
	}
	.vote-submit-opra{
		width: 100%;
		display: flex;
		margin-top: 93rpx;
	}
	.vote-submit-opra .left, .vote-submit-opra .right{
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.vote-submit-opra .vote-btn{
		width: 332rpx;
		height: 110rpx;
		line-height: 110rpx;
		text-align: center;
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: bold;
	}
	.vote-submit-opra .vote-btn-view{
		color: #FFFFFF;
		background: url(../../static/vote/btn01.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center center;
	}
	.vote-submit-opra .vote-btn-submit{
		color: #731D03;
		background: url(../../static/vote/btn02.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center center;
	}
	.vote-submit-opra .vote-btn-submit2{
		color: #494949;
		background: url(../../static/vote/btn03.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center center;
	}
</style>
